<template>
    <div class="Box">
      <div class="homeBox">
        <div class="leftBox">
          <el-button type="primary" @click="showIcon">在地图上显示点</el-button
          ><br /><br />
          <el-button type="primary" @click="moveXiAn([108.9423, 34.261])"
            >移动到西安钟楼</el-button
          ><br /><br />
          <el-button type="primary" @click="moveXiAn([108.8821, 34.2227])"
            >移动到初始点</el-button
          ><br /><br />
          <el-button type="primary" @click="trajectory">显示一段轨迹</el-button
          ><br /><br />
          <el-button type="primary" @click="clearTrajectory"
            >清除上面的轨迹</el-button
          ><br /><br />
          <el-button type="primary" @click="range">显示范围</el-button><br /><br />
        </div>
        <!-- 地图 -->
        <section class="map-wrap">
          <OpenlayerMap
            ref="mapRef"
            needMouseIndicate
            :assignMouseIndicatePosition="{
              zIndex: 1,
              right: '83px',
              top: '14px',
              fontSize: '16px',
              fontWeight: '400',
              color: '#fff',
            }"
          >
            <!-- 地图弹框 -->
            <template #right="sol">
              <div :style="{ width: '0vh' }"></div>
              <div>
                <div class="map_right" v-if="sol.value?.showLength">
                  <div v-for="(item, l) in sol.value.show" :key="l">
                    <span v-for="(n, i) in item" :key="i">{{ n }}</span>
                  </div>
                  <button v-if="sol.value.button">
                    {{ sol.value.buttonText ? sol.value.buttonText : "查看" }}
                  </button>
                </div>
                <div class="map_right" v-else>
                  <span v-for="(n, i) in sol.value?.show" :key="i">{{ n }}</span>
                  <button v-if="sol.value?.button">
                    {{ sol.value.buttonText ? sol.value.buttonText : "查看" }}
                  </button>
                </div>
              </div>
            </template>
          </OpenlayerMap>
          <!-- 工具箱 -->
          <div class="work-box">
            <div class="tool">
              <div v-for="(n, i) in toolData" :key="i">
                <span>{{ n.title }}</span>
                <div>
                  <span
                    :style="{ color: toolsindex == `${i}${l}` ? '#409EFF' : '' }"
                    v-for="(e, l) in n.data"
                    :key="l"
                    @click="clickTool(e, i, l)"
                    >{{ e.title }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </section>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref , nextTick } from "vue";
  const mapRef = ref<null | HTMLElement>(null);
  
  const data = ref<any>([
    {
      id: 14,
      name: "张三",
      longitude: "108.8821",
      latitude: "34.2227",
      pointList: [
        [108.8646, 34.2136],
        [108.8695, 34.2134],
        [108.8647, 34.2187],
      ],
    },
    {
      id: 14,
      name: "李四",
      longitude: "108.8867",
      latitude: "34.2283",
      pointList: [
        [108.8943, 34.2149],
        [108.8951, 34.2127],
        [108.8909, 34.2135],
        [108.8973, 34.2122],
      ],
    },
  ]);
  const toolData = ref<any>([
    {
      title: "基础",
      key: 0,
      data: [
        { title: "测量距离" },
        { title: "测量面积" },
        { title: "清除测量" },
      ],
    },
    {
      title: "消防",
      key: 1,
      data: [
        { title: "画笔" },
        { title: "隔离带" },
        { title: "线选" },
        { title: "框选" },
        { title: "多边形选" },
        { title: "圈选" },
        { title: "清除" },
      ],
    },
  ]);
  const toolsindex = ref<string>("");
  //地图跳转
  function moveXiAn(coordinate: any) {
    (mapRef.value as any).moveToPoint(...coordinate);
  }
  //显示轨迹
  function trajectory() {
    let gis = [
      [108.9423, 34.261],
      [108.9424, 34.2568],
      [108.9478, 34.2566],
      [108.9538, 34.2496],
    ];
    (mapRef.value as any).showWay({
      id: 11, //id
      gis: gis,
      name: "轨迹", //
    });
  }
  function clearTrajectory() {
    (mapRef.value as any).clearRoute(11);
  }
  //地图上显示图标
  function showIcon() {
    data.value.forEach((item: any) => {
      nextTick(() => {
        (mapRef.value as any).lastShowPoints(
          data.value,
          "icon.png",
          1,
          () => {
            return {
              show: [
                `${item.name}`,
                `纬度：${item.latitude}，经度：${item.longitude}`,
              ],
              data: item,
              popupClass: "popup-box-right",
              bottom: "-13vh",
              left: "15px",
              button: true, //地图弹窗是否显示按钮
              buttonText: "点击", //地图弹窗按钮文字
              circle: true, //是否展示范围
            };
          }
        );
      });
    });
  }
  
  //地图上显示范围
  function range() {
    nextTick(() => {
      (mapRef.value as any).groupPlot(data.value);
    });
  }
  //点击工具
  function clickTool(n:any,i:number,l:number){
    console.log(n);
    
    if(toolsindex.value=='') toolsindex.value=`${i}${l}`; else {
      toolsindex.value='';
      nextTick(()=>{
        (mapRef.value as any).exportMap.removeInteraction((mapRef.value as any).draw);
        (mapRef.value as any).draw = null;
      });
    }
    switch (`${i}${l}`) {
      case '00': //测量距离
      if(toolsindex.value==`00`) (mapRef.value as any).measure("LineString");
        break;
      case '01': //测量面积
      if(toolsindex.value==`01`) (mapRef.value as any).measure("Polygon");
        break;
      case '02': //清除测量
      if(toolsindex.value==`02`) {
        for (const key in (mapRef.value as any).state.drawCache) {
          (mapRef.value as any).exportMap.removeOverlay(
            (mapRef.value as any).state.drawCache[key].measureTooltip
          );
        }
        (mapRef.value as any).exportDrawVector.getSource().clear();
        toolsindex.value =''
      }
        break;
      case "01": //测量距离
        if (toolsindex.value == `01`) (mapRef.value as any).measure("LineString");
        break;
      case "02": //测量面积
        if (toolsindex.value == `02`) (mapRef.value as any).measure("Polygon");
        break;
      case "03": //清除测量
        if (toolsindex.value == `03`) {
          for (const key in (mapRef.value as any).drawCache) {
            (mapRef.value as any).map.removeOverlay(
              (mapRef.value as any).drawCache[key].measureTooltip
            );
          }
          (mapRef.value as any).drawVector.getSource().clear();
          toolsindex.value = "";
        }
        break;
      case "10": //点
        if (toolsindex.value == `10`) (mapRef.value as any).drawLine(true);
        break;
      case "11": //正三角 隔离带
        if (toolsindex.value == `11`) (mapRef.value as any).drawCircle("triangle");
        break;
      case "12": //线
        if (toolsindex.value == `12`) (mapRef.value as any).drawLine(false);
        break;
      case "13": //正方形
        if (toolsindex.value == `13`) (mapRef.value as any).drawCircle("square");
        break;
      case "14": //多边形
        if (toolsindex.value == `14`) (mapRef.value as any).drawPolygon();
        break;
      case "15": //圆形
        if (toolsindex.value == `15`) (mapRef.value as any).drawCircle("circle");
        break;
      case '16': //清除
      if(toolsindex.value==`16`){     
        (mapRef.value as any).exportDrawVector.getSource().clear();
        toolsindex.value =''
      } break;
      default:
        break;
    }
    (mapRef.value as any).draw && (mapRef.value as any).draw.on("drawend", () => {
        (mapRef.value as any).exportMap.removeInteraction((mapRef.value as any).draw);
        (mapRef.value as any).draw = null;
        toolsindex.value = '';
      });
  }
  
  </script>
  <style lang="scss" scoped>
  .Box {
    width: 100%;
    height: 100vh;
    position: relative;
    .homeBox {
      width: 100%;
      height: 100%;
      border: 1px solid gray;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      .leftBox {
        width: 20%;
      }
      .map-wrap {
        flex: 1;
        height: 100%;
        position: relative;
      }
    }
  }
  
  //地图弹窗样式
  .map_right {
    color: #fff;
    font-size: 14px;
    padding: 15px 20px;
    display: flex;
    flex-direction: column;
    span:nth-child(n) {
      display: flex;
      flex-direction: column;
      margin-bottom: 10px;
      white-space: nowrap;
    }
    span:nth-child(1) {
      font-size: 16px;
      font-weight: 500;
      margin-top: 10px;
    }
    > button {
      // color: #409EFF;
      background: #409eff;
      text-align: center !important;
      padding: 6px 0;
      border: none;
      margin: 10px 16px 20px 16px;
      cursor: pointer;
    }
  }
  .work-box {
    display: flex;
    align-items: center;
    color: #fff;
    position: absolute;
    bottom: 60px;
    left: 30px;
    .tool {
      position: absolute;
      // bottom: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      border: 1px solid;
      margin: 0 20px;
      background: gray;
      border-radius: 5px;
      > * {
        padding: 0 10px;
        display: flex;
        width: 510px;
        align-items: center;
        > span {
          font-size: 16px;
          font-weight: 700;
        }
        > div:first-child {
          border-bottom: 1px solid;
        }
        > div {
          margin: 3px 10px;
          display: flex;
          flex: 1;
          justify-content: space-around;
          span {
            display: inline-block;
            padding: 8px;
            border: 1px solid;
            cursor: pointer;
            margin: 3px 5px;
            font-size: 14px;
            border-radius: 5px;
          }
        }
      }
    }
  }
  </style>
  